<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-商品详情</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<style>
		/*reset*/
		/* 把标签默认的间距设为0 */
		body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

		/* 让h标签文字大小继承body的文字设置 */
		h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

		/* 去掉列表默认的图标 */
		ul,ol{list-style:none;}

		/* 去掉em默认的斜体 */
		em{font-style: normal;}

		/* 去掉a标签默认的下划线 */
		a{text-decoration:none;}


		/* 去掉加链接时产生的框线 */
		img{border:0;}

		/* 清除浮动 */
		.clearfix:before,.clearfix:after{content:"";display:table}
		.clearfix:after{clear:both;}
		.clearfix{zoom:1}

		/* 浮动 */
		.fl{float:left}
		.fr{float:right}


		body{font-family:'Microsoft Yahei';font-size:12px;color:#666;}
		html,body{height:100%}
		/* 顶部样式 */
		.header_con{
			background-color:#f7f7f7;
			height:29px;
			border-bottom:1px solid #dddddd
		}

		.header{
			width:1200px;
			height:29px;
			margin:0 auto;
		}

		.welcome,.login_info,.login_btn,.user_link{
			line-height:29px;
		}

		.login_info{
			display:none;
		}

		.login_info em{color:#ff8800}

		.login_btn a,.user_link a{
			color:#666;
		}

		.login_btn a:hover,.user_link a:hover{
			color:#ff8800;
		}

		.login_btn span,.user_link span{
			color:#cecece;
			margin:0 10px;
		}


		/* logo、搜索框、购物车样式 */

		.search_bar{width:1200px;height:115px;margin:0 auto;}
		.logo{width:150px;height:59px;margin:29px 0 0 17px;}

		.search_con{width:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 124px;background:url(image/images/icons.png) 10px -338px no-repeat;}
		.search_con .input_text{width:470px;height:34px;border:0px;margin:2px 0 0 36px;outline:none;font-size:12px;color:#737272;font-family:'Microsoft Yahei'}

		.search_con .input_btn{
			width:100px;height:38px;background-color:#37ab40;border:0px;font-size:14px;color:#fff;font-family:'Microsoft Yahei';outline:none;cursor:pointer;
		}

		.guest_cart{
			width:200px;height:40px;margin-top:34px;
		}

		.guest_cart .cart_name{
			width:158px;height:38px;line-height:38px;border:1px solid #dddddd;display:block;background:url(image/images/icons.png) 13px -300px no-repeat;font-size:14px;color:#37ab40;text-indent:56px;
		}

		.guest_cart .goods_count{
			width:40px;height:40px;text-align:center;line-height:40px;font-size:18px;
			font-weight:bold;color:#fff;background-color:#ff8800;
		}


		/* 商品列表样式 */

		.list_model{width:1200px;height:340px;margin:15px auto 0;}
		.list_title{height:40px;border-bottom:2px solid #42ad46}
		.list_title h3{height:40px;line-height:40px;font-size:16px;color:#37ab40;font-weight:bold;}
		.list_title .subtitle{height:20px;line-height:20px;margin-top:15px;}
		.list_title .subtitle span{color:#666;margin:0 10px 0 20px;}
		.list_title .subtitle a{color:#666;margin:0 5px;}
		.list_title .subtitle a:hover,.goods_more:hover{color:#ff8800}
		.goods_more{height:20px;margin-top:15px;color:#666}

		.goods_con{height:300px;}
		.goods_banner{width:200px;height:300px;}
		.goods_banner img{width:200px;height:300px;}

		.goods_list{width:1000px;height:299px;border-bottom:1px solid #ededed}
		.goods_list li{height:299px;width:249px;border-right:1px solid #ededed;float:left}
		.goods_list li:hover{width:248px;height:297px;border:1px solid gold;}
		.goods_list li:hover img{opacity:0.8}

		.goods_list li h4{width:200px;height:50px;margin:20px auto 0;text-align:center;}
		.goods_list li h4 a{font-size:14px;color:#666;font-weight:normal;line-height:24px;}
		.goods_list li h4 a:hover{color:#ff8800}

		.goods_list li img{display:block;width:180px;height:180px;margin:0 auto;}
		.goods_list li .prize{text-align:center;font-size:20px;color:#c40000;margin-top:5px;}

		/* 页面底部样式 */
		.footer{
			border-top:2px solid #42ad46;
			margin:30px 0;
		}

		.foot_link{text-align:center;margin-top:30px;}
		.foot_link a,.foot_link span{color:#4e4e4e;}
		.foot_link a:hover{color:#ff8800}
		.foot_link span{padding:0 10px}
		.footer p{text-align:center; margin-top:10px;}


		/* 二级页面面包屑导航 */
		.breadcrumb{
			width:1200px;height:40px;margin:0 auto;
		}
		.breadcrumb a{line-height:40px;color:#37ab40}
		.breadcrumb a:hover{color:#ff8800}
		.breadcrumb span{line-height:40px;color:#666;padding:0 5px;}


		.main_wrap{width:1200px;margin:0 auto;}
		.l_wrap{width:200px;}
		.r_wrap{width:980px;}


		/* 新品推荐样式 */

		.new_goods{
			border:1px solid #ededed;
			border-top:2px solid #37ab40;
			padding-bottom:10px;
		}

		.new_goods h3{
			height:33px;line-height:33px;background-color:#fcfcfc;border-bottom:1px solid #ededed;font-size:14px;font-weight:normal;text-indent:10px;
		}

		.new_goods ul{width:160px;margin:0 auto;overflow:hidden;}
		.new_goods li{border-bottom:1px solid #ededed;margin-bottom:-1px;}
		.new_goods li img{display:block;width:150px;height:150px;margin:10px auto;}
		.new_goods li h4{width:160px;margin:0 auto;}
		.new_goods li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
		.new_goods li .prize{font-size:14px;color:#da260e;margin:10px auto;}





		/* 商品详情样式 */
		.goods_detail_con{
			width:1198px;
			height:398px;
			border:1px solid #ededed;
			margin:0 auto 20px;
		}

		.goods_detail_pic{width:350px;height:350px;margin:24px 0 0 24px;}
		.goods_detail_list{
			width:730px;height:350px;margin:24px 24px 0 0;
		}
		.goods_detail_list h3{font-size:30px;line-height:50px;color:#666;font-weight:bolder;}
		.goods_detail_list p{color:#666;line-height:40px;}
		.prize_bar{height:70px;background-color:#fff5f5;line-height:70px;}
		.prize_bar .show_pirze{font-size:20px;color:#ff3e3e;padding-left:20px}
		.prize_bar .show_pirze em{font-style:normal;font-size:20px;padding-left:10px}
		.prize_bar .show_unit{padding-left:150px}

		.goods_num{height:52px;margin-top:19px;}
		.goods_num .num_name{width:70px;height:52px;line-height:52px;}
		.goods_num .num_add{width:75px;height:50px;border:1px solid #dddddd}
		.goods_num .num_add input{width:49px;height:50px;text-align:center;line-height:50px;border:0px;outline:none;font-size:14px;color:#666}
		.goods_num .num_add .add,.goods_num .num_add .minus{width:25px;line-height:25px;text-align:center;border-left:1px solid #ddd;border-bottom:1px solid #ddd;color:#666;font-size:14px}
		.goods_num .num_add .minus{border-bottom:0px}

		.total{height:35px;line-height:35px;margin-top:25px;}
		.total em{font-style:normal;color:#ff3e3e;font-size:18px}

		.operate_btn{height:40px;margin-top:35px;font-size:0;position:relative;}


		.detail_tab{
			height:35px;
			border-bottom:1px solid #37ab40
		}

		.detail_tab li{height:34px;line-height:34px;padding:0 30px;font-size:14px;color:#333333;float:left;border:1px solid #e8e8e8;border-bottom:0px;cursor:pointer;background-color:#faf8f8}

		.detail_tab li.active{border-top:2px solid #37ab40;position:relative;background-color:#fff;border-left:1px solid #37ab40;border-right:1px solid #37ab40;top:-1px;height:35px;}

		.tab_content dt{margin-top:10px;font-size:16px;color:#044d39}
		.tab_content dd{line-height:24px;margin-top:5px;}

	</style>

</head>
<body style="font-size: 12px">
<div id="app">
		<div class="header_con">
			<div class="header">
				<div class="welcome fl">欢迎来到菜先生!</div>
				<div class="fr">
					<!--<div class="login_info fl">
						欢迎您：<em>张 山</em>

					</div>-->
					<div class="login_btn fl">
						<a @click="userLogin()">登录</a>
						<span>|</span>
						<a @click="userRegister()">注册</a>
					</div>
					<div class="user_link fl">
						<span>|</span>
						<a @click="business()">商家中心</a>
						<span>|</span>
						<a @click="message()">消息中心</a>
						<span>|</span>
						<a @click="isLogin()">用户中心</a>
						<span>|</span>
						<a @click="myShop()">我的购物车</a>
						<span>|</span>
						<a @click="myOrder()">我的订单</a>
					</div>
				</div>
			</div>
	</div>



	<div class="goods_detail_con clearfix" style="height: 500px;">
		<div class="goods_detail_pic fl"><img :src="detail.img" width="550px" height="450px"></div>

		<div class="goods_detail_list fr" style="margin-left: 10px;width:500px; height: 450px;">
			<p style="margin-bottom: 20px;font-size: 20px">商品名称：{{detail.gname}}</p>
			<p style="margin-bottom: 20px; font-size: 20px">商品描述：{{detail.description}}</p>

			<p style="margin-bottom: 20px; font-size: 20px; padding-top: 20px" class="prize_bar">
				商品单价：
			<span class="show_pirze" style="margin-bottom: 20px">¥<em>{{detail.sprice}}/{{detail.spec.stype}}</em></span>
			</p>
			<p style="margin-bottom: 20px; font-size: 20px">
			库存数量：{{detail.count}}件
			</p>
			<p style="margin-bottom: 20px; font-size: 20px">
				<button @click="goStore(detail.store.id)">去店铺：{{detail.store.sname}} >></button>
			</p>
			<p style="margin-bottom: 20px">
			<div class="operate_btn">
				<el-button @click="addCart(detail.id)" style="background-color: orange;color: black" >加入购物车</el-button>
				<el-button @click="buy(detail.id)" style="background-color: orangered;color:black;">立即购买</el-button>
				<el-button @click="goBack()" style="background-color: orangered;color:black;">返回主页</el-button>
				<!--<button >立即购买</button>
				<button >加入购物车</button>-->
			</div>
			</p>
		</div>
	</div>




</div>

	<script>
		var app = new Vue({
			el:"#app",
			data:{
				detail:{},
				num:0,
				totalPrice:0,
				cartInfo:{}
			},
			methods:{
				myOrder:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							if(confirm("还未登录，请先进行登录")){
								window.location.href = "/cai/userLogin.html";
							}
						}else {
							window.location.href = "/cai/userOrder.html"
						}}
					);
				},
				userRegister:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							window.location.href = "/cai/userRegister.html";
						}else {
							app.$notify.error({
								title: '错误提示',
								message: '您已经成功注册，请勿重复注册'
							});
						}}
					);
				},
				userLogin:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							window.location.href = "/cai/userLogin.html";
						}else {
							app.$notify.error({
								title: '错误提示',
								message: '您已经成功登录，请勿重复登录'
							});
						}}
					);
				},
				message:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							if(confirm("还未登录，请先进行登录")){
								window.location.href = "/cai/userLogin.html";
							}
						}else {
							window.location.href = "/cai/reception.html"
						}}
					);
				},
				goStore:function(a){
					window.location.href="goStore.html?id="+a;
				},
				business:function () {
					$.get("/cai/consumer/businessLogin",function (backData) {
						if(backData.code == 1){
							window.location.href = "/cai/businessMain.html";
						}else if(backData.code == 3){
							window.location.href = "/cai/businessRegister.html";
						}else{
							if(confirm("还未登录，请先进行登录")){
								window.location.href = "/cai/userLogin.html";
							}
						}
					});
				},
				myShop:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							if(confirm("还未登录，请先进行登录")){
								window.location.href = "/cai/userLogin.html";
							}
						}else {
							window.location.href = "/cai/shop.html";
						}}
					);
				},
				isLogin:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
								if(backData.code == 2){
									if(confirm("还未登录，请先进行登录")){
										window.location.href = "/cai/userLogin.html";
									}
								}else {
									window.location.href = "/cai/mineInfo.html";
								}
							}
					);
				},
				goBack:function(){
					$.get("/cai/consumer/businessLogin",function (backData){
						if(backData.code == 2){
							window.location.href = "/cai/index.html";
						}else {
							window.location.href = "/cai/indexTwo.html";
						}}
					);
				},
				/*handleChange:function(d){
					c = app.detail.sprice;
					app.totalPrice = c*d;

				},*/
			    buy:function (a) {
					app.detail.id=a;
                   $.post("/cai/pay/payTest",app.detail,function (backData) {
					   if (backData.code== 1001) {
						   //查找到当前页面的body，将后台返回的data替换掉他的内容
						   document.querySelector('body').innerHTML = backData.data;
						   //执行submit表单提交，让页面重定向，跳转到支付宝页面
						   document.forms[0].submit();
					   }
				   })
                },
                addCart:function (b) {
                   // window.location.href="/cai/cart.html?id="+b;
					$.get("/cai/consumer/businessLogin",function (backData){
								if(backData.code == 2){
									if(confirm("还未登录，请先进行登录")){
										window.location.href = "/cai/userLogin.html";
									}
								}else {
									app.cartInfo.gid=b;
									app.cartInfo.price=app.detail.sprice;
									$.post("/cai/cart/addCart",app.cartInfo,function (backData) {
										if(backData.code == 1){
											app.$notify({
												title: '成功提示',
												message: backData.msg,
												type: 'success'
											});
										}else {
											app.$notify.error({
												title: '错误提示',
												message: backData.msg
											});
										}
									});
								}
							}
					);
                }
            }
		});


		window.onload = function () {
			var url = location.search;
			var id = JSON.parse(window.decodeURIComponent(url.split("=")[1]));
			$.get("/cai/detail/getDetail/"+id,function (backData) {
				app.detail = backData.data;
			})
		};

	</script>
</body>
</html>